<template>
  <view class="conter">
    <view class="header">
      <view class="banner"><image class="vipHeader-img" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/vip/Head_background.png"></image></view>
      <!-- 头部导航与状态栏 -->
      <view class="tab-statusbar" v-if="!$wechat.isWechat()">
        <view style="height: 88rpx;"></view>
        <view class="top-tabbar">
          <i class="iconfont" @click="backClick">&#xe641;</i>
          <view class="vipName">会员中心</view>
          <view class="iconfont"></view>
        </view>
      </view>
    </view>
    <view class="title-conten">
      <view class="pri-tiele">
        <view class="chatsc-box">
          <view class="chatsc"></view>
          <view class="chatsc color-icon" style="margin-left: 14rpx;"></view>
        </view>
        <view class="chara-name">立刻开启三大特权</view>
        <view class="chatsc-box">
          <view class="chatsc color-icon"></view>
          <view class="chatsc" style="margin-left: 14rpx;"></view>
        </view>
      </view>
      <view class="open-course">
        <view class="title-btn">
          <view class="title-name">直接购买VIP2，赠送4节体验课</view>
          <view class="vip-btn">VIP2</view>
        </view>
        <view class="card-img">
          <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/vip/Card_background.png"></image>
        </view>
        <view class="course-select">
          <view class="item-course" v-for="(item,index) in courseList" :key="item.id">
            <view class="backg-img">
              <image :src="item.imgUrl"></image>
            </view>
            <view>{{ item.title }}</view>
            <view>{{ item.subtitle }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 智能机器人 -->
    <view class="robot">
      <view class="img-left"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/vip/Mask%20Group.png"></image></view>
      <view class="text-right">
        <view class="btn-send">前100名送</view>
        <view class="title">智能学习机器人</view>
        <view class="icon-conter">
          <view class="iconfont">&#xe60d;</view>
          <view class="item-name">打造新型教育方法</view>
        </view>
        <view class="icon-conter" style="margin-top:8rpx;">
          <view class="iconfont">&#xe60d;</view>
          <view class="item-name">培养自主学习意识</view>
        </view>
      </view>
    </view>
    <!-- 购买文本 -->
    <view class="buy-hint">
     <view class="item-title">购买须知</view>
      <view class="item-conten">
        <view class="item-num">1.</view>
        <view>本数字化内容中具体思维建模内容以APP为准，请确认无 误后购买；</view>
      </view>
      <view class="item-conten">
        <view class="item-num">2.</view>
        <view>本数字化内容开通VIP后，即可在本机学习VIP内容，不适 用于无理由退款；</view>
      </view>
      <view class="item-conten">
        <view class="item-num">3.</view>
        <view>APP内购买VIP的用户，购买后自动开通VIP，无需单独激活；</view>
      </view>
      <view class="item-conten">
        <view class="item-num">4.</view>
        <view>一个VIP账号月累计使用设备请勿超过3台，以确保您的权 益不受损失。</view>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class="footer-btn">
      <view class="btn-pay">
        <view>一顿火锅钱<text style="font-size: 56rpx;">￥368 </text>开启</view>
        <view class="tooltip ">
          <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/vip/Dialog_box.png"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default{
    data() {
      return{
        courseList: [
          { id: 1, title: '12节', subtitle: '编程思维课', imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/vip/course_p1.png' },
          { id: 2, title: '48节', subtitle: '专注力训练', imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/vip/course_p2.png' },
          { id: 3, title: '1年', subtitle: '无限次回看', imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/vip/course_p3.png'}
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
  .conter{
    padding-bottom: 200rpx;
    .header{
    	position: relative;
    	.banner{
        width: 100%;
        height: 400rpx;
        border-radius: 0px 0px 50rpx 50rpx;
        .vipHeader-img{
           border-radius: 0px 0px 50rpx 50rpx;
        }
    	}
    	.tab-statusbar{
    		width: 100%;
    		position: absolute;
    		left: 0;
    		top: 0;
    		.top-tabbar{
    			width: 100%;
    			height: 88rpx;
    			display: flex;
    			align-items: center;
    			justify-content: space-between;
    			color: #fff;
    			padding: 0 24rpx;
          .vipName{
            font-weight: bold;
            font-size: 36rpx;
            color: #FFD098;
          }
    		}
    	}
    }
    .title-conten{
      width: 680rpx;
      height: auto;
      margin:auto;
      margin-top: -170rpx;
      position: relative;
      z-index: 1;
      .pri-tiele{
        width: 100%;
        height: 180rpx;
        background: linear-gradient(95.89deg, #505F8C 2.15%, #8193C7 97.73%);
        border-radius: 32rpx;
        display: flex;
        justify-content: center;
        padding-top: 20rpx;
        .chatsc-box{
          display: flex;
          .chatsc{
            width: 16rpx;
            height: 16rpx;
            border: 2rpx solid rgba(246, 189, 121, 0.6);
            box-sizing: border-box;
            border-radius: 2rpx;
            transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
            margin-top: 20rpx;
          }
          .color-icon{
            border: 2rpx solid #F7BD79 !important;
          }
        }
        .chara-name{
          font-weight: 500;
          font-size: 36rpx;
          color: #FFFFFF;
          margin: 0 17rpx;
        }
      }
      .open-course{
        width: 100%;
        height: 394rpx;
        background: linear-gradient(95.89deg, #FF675B 2.15%, #FFA76E 97.73%);
        border-radius: 32rpx;
        margin-top: -90rpx;
        padding: 20rpx 20rpx 48rpx 20rpx;
        position: relative;
        .title-btn{
          display: flex;
          align-items: right;
          justify-content: flex-end;
          .title-name{
            font-size: 28rpx;
            color: #FFFFFF;
          }
          .vip-btn{
            width: 96rpx;
            height: 38rpx;
            background: #FFDB7B;
            border-radius: 19rpx;
            text-align: center;
            line-height: 38rpx;
            color: #683614;
            font-size: 28rpx;
            margin-left: 12rpx;
          }
        }
        .card-img{
          width: 360rpx;
          height: 360rpx;
          position: absolute;
          right: 0;
          bottom: 0;
        }
        .course-select{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 54rpx;
          .item-course{
            // width: 112rpx;
            font-weight: bold;
            font-size: 32rpx;
            color: #FFFFFF;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 2;
            .backg-img{
              width: 112rpx;
              height: 128rpx;
              border-radius: 20rpx 20rpx 0px 0px;
            }
          }
        }
      }
    }
    .robot{
      width: 680rpx;
      height: 240rpx;
      border-radius: 40rpx;
      background: #F7FDFF;
      margin: auto;
      margin-top: 34rpx;
      display: flex;
      align-items: center;
      .img-left{
        width: 252rpx;
        height: 240rpx;
        border-radius: 40rpx 0 0 40rpx;
      }
      .text-right{
        margin-left: 40rpx;
        .btn-send{
          width: 126rpx;
          height: 32rpx;
          background: #ff5a5a;
          border-radius: 40rpx;
          line-height: 32rpx;
          text-align: center;
          color: #FFFFFF;
          font-size: 20rpx;
        }
        .title{
          font-weight: bold;
          font-size: 32rpx;
          color: #262626;
          margin: 16rpx 0 10rpx 0;
        }
        .icon-conter{
          display: flex;
          align-items: center;
          .iconfont{
            font-size: 26rpx;
            margin: 5rpx 8rpx 0 0;
            color: #16EA6B;
          }
          .item-name{
            font-size: 24rpx;
            color: #262626;
          }
        }
      }
    }
    .buy-hint{
      margin: 20rpx 0 0rpx 0; 
      padding: 0 40rpx;
      .item-title{
        font-weight: 500;
        font-size: 32rpx;
        color: #262626;
        margin-bottom: 20rpx;
      }
      .item-conten{
        display: flex;
        font-size: 24rpx;
        color: #262626;
        margin-bottom: 12rpx;
        .item-num{
          font-size: 28rpx;
          color: #000000;
          margin: -5rpx 14rpx 0 0;
        }
      }
    }
    .footer-btn{
      width: 100%;
      padding: 30rpx 0;
      background: #FFFFFF;
      box-shadow: 0px -4rpx 20rpx rgba(0, 0, 0, 0.06);
      border-radius: 40rpx 40rpx 0px 0px;
      position: fixed;
      left: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .btn-pay{
        width: 680rpx;
        height: 102rpx;
        background: linear-gradient(90deg, #F0E0B7 0%, #D4B380 100%);
        border-radius: 32rpx;
        line-height: 102rpx;
        text-align: center;
        font-weight: bold;
        font-size: 48rpx;
        .tooltip{
          width: 182rpx;
          height: 72rpx;
          position: absolute;
          top: -10rpx;
          right: 65rpx;
        }
      }
    }
  }
</style>
